.rdtabs--card {
  --line-width: 0.1em;
  --radius: 10px;

  --width: 1.5em;

  .rdtabs__tabheader-inner {
    display: flex;
    width: 100%;
  }

  .rdtabs__tab-inner {
    // background-color: red;
    display: flex;
    align-items: center;
    align-content: center;
    text-align: center;
    height: 100%;
    padding: var(--radius) 15px;
  }

  .rdtabs__tabheader {
    // border-bottom: 2px #D0D9E1 solid;
    display: flex;
    // justify-items: center;

    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding-top: 10px;

    // Rounded
    background-color: var(--background-color-accent-lvl2);
  }

  .rdtabs__rightendcap {
    flex-grow: 1;

    .rdtabs__tab-inner {
      flex-grow: 1;
    }
  }

  .rdtabs__tab--active {
    background-color: var(--background-color-lvl2);
    border-bottom: var(--line-width) solid var(--background-color-lvl2);
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);

    .rdtabs__tab-inner {
      clip-path: inset(0 0 8px 0);
      background-color: var(--background-color-lvl2);
      border-top: var(--line-width) solid #d3dbe5;
      border-left: var(--line-width) solid #d3dbe5;
      border-right: var(--line-width) solid #d3dbe5;
      border-top-left-radius: var(--radius);
      border-top-right-radius: var(--radius);
    }
  }

  .rdtabs__tab--active:after {
    // background-color: red;
    height: var(--width);
    width: var(--width);
    position: absolute;
    content: "";
    border: var(--line-width) solid #d3dbe5;
    border-bottom-left-radius: 6px;
    // background-color: #F9F9F9;
    border-radius: 50%;
    bottom: calc(var(--line-width) * -1);
    left: calc(var(--width) * -1 + var(--line-width));
    clip-path: inset(calc(var(--width) / 2) 0 0 calc(var(--width) / 2));
  }

  .rdtabs__tab-component:not(.rdtabs__tab--active) {
    .rdtabs__tab-inner {
      border-left: var(--line-width) solid var(--background-color-accent-lvl2);
      border-right: var(--line-width) solid var(--background-color-accent-lvl2);
      border-top: var(--line-width) solid transparent;
      border-bottom: var(--line-width) solid #d3dbe5;
      background-color: var(--background-color-accent-lvl2);
    }

    .rdtabs__tab-inner:after {
      content: "";
      position: absolute;
      height: 5px;
      width: 100%;
      bottom: 0;
      left: 0;
      border-bottom-width: var(--line-width);
      border-bottom-style: solid;
      border-bottom-color: #d3dbe5;
    }
  }

  .rdtabs__tab-previous {
    background-color: var(--background-color-lvl2);
    .rdtabs__tab-inner {
      clip-path: inset(0 8px 0 0);
    }
  }

  .rdtabs__tab-previous:before {
    content: "";
    height: 100%;
    width: var(--radius);
    right: 0;
    background-color: var(--background-color-accent-lvl2);
    border-bottom-right-radius: var(--radius);
    position: absolute;
  }

  .rdtabs__tab--active + .rdtabs__tab-component {
    background-color: var(--background-color-lvl2);
    .rdtabs__tab-inner {
      clip-path: inset(0 0 0 8px);
    }
  }

  .rdtabs__tab--active + .rdtabs__tab-component:before {
    content: "";
    height: 100%;
    width: var(--radius);
    left: 0;
    background-color: var(--background-color-accent-lvl2);
    border-bottom-left-radius: var(--radius);
    position: absolute;
  }
  .rdtabs__tab--active + .rdtabs__tab-component:after {
    height: var(--width);
    width: var(--width);
    position: absolute;
    content: "";
    border: var(--line-width) solid #d3dbe5;
    border-bottom-left-radius: 6px;
    border-radius: 50%;
    bottom: 0;
    left: calc(var(--line-width) * -1);
    clip-path: inset(calc(var(--width) / 2) calc(var(--width) / 2) 0 0);
  }

  .rdtabs__tablist {
    display: flex;
    width: 100%;
    align-items: center;
    position: relative;
  }

  .rdtabs__tab-component {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    font-weight: 600;
    color: var(--text-muted-color);
    height: 100%;
  }

  .rdtabs__tab--active {
    color: var(--font-color);
  }
}
